<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>露西羊の小窝</title>
    <style>
        :root {
            --pink: #FFB6C1;
            --blue: #87CEEB;
        }

        body {
            margin: 0;
            background: linear-gradient(135deg, var(--pink), var(--blue));
            min-height: 100vh;
            font-family: 'Segoe UI', '幼圆', sans-serif;
            position: relative;
            overflow-x: hidden;
        }

        .cloud {
            position: absolute;
            width: 150px;
            opacity: 0.3;
            animation: float 8s infinite linear;
        }

        @keyframes float {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100vw); }
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            position: relative;
            z-index: 1;
        }

        header {
            text-align: center;
            padding: 40px;
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid white;
            margin: 20px auto;
            background: url('https://img.icons8.com/clouds/200/000000/sheep.png') center/cover;
        }

        h1 {
            color: #FF69B4;
            font-size: 2.5em;
            text-shadow: 2px 2px white;
            margin: 15px 0;
        }

        .info-box {
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin: 20px 0;
            transition: transform 0.3s;
        }

        .info-box:hover {
            transform: translateY(-5px);
        }

        .game-btn {
            display: block;
            width: 200px;
            margin: 20px auto;
            padding: 15px;
            background: linear-gradient(45deg, #FF69B4, #FF1493);
            color: white;
            text-align: center;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(255,105,180,0.4);
            transition: 0.3s;
        }

        .game-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 15px rgba(255,105,180,0.6);
        }

        .sheep-icon {
            width: 60px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            transition: 0.3s;
        }

        .sheep-icon:hover {
            transform: rotate(15deg);
        }

        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>
    <!-- 云朵背景 -->
    <img src="https://img.icons8.com/clouds/100/000000/cloud.png" class="cloud" style="top: 10%;">
    <img src="https://img.icons8.com/clouds/100/000000/cloud.png" class="cloud" style="top: 40%; animation-delay: -2s;">
    
    <div class="container">
        <header>
            <div class="avatar"></div>
            <h1>露西羊の梦幻乐园</h1>
        </header>

        <div class="info-box">
            <h2>🌸 工作室</h2>
            <p>露西羊工作室</p>
        </div>

        <div class="info-box">
            <h2>📱 联系方式</h2>
            <p>QQ：1443799533</p>
        </div>

        <a href="https://www.taptap.cn/app/750503" target="_blank" class="game-btn">
            🎮 玩《两键》
        </a>

        <img src="https://img.icons8.com/doodle/96/000000/sheep--v1.png" 
             class="sheep-icon" 
             onclick="playSound()"
             title="点我咩咩叫~">
    </div>

    <script>
        // 鼠标跟随特效
        document.addEventListener('DOMContentLoaded', () => {
            const colors = ['#FFB6C1', '#87CEEB'];
            let cursorX = 0, cursorY = 0;
            
            document.addEventListener('mousemove', (e) => {
                cursorX = e.clientX;
                cursorY = e.clientY;
                
                // 创建轨迹粒子
                const particle = document.createElement('div');
                particle.style.cssText = `
                    position: fixed;
                    width: 8px;
                    height: 8px;
                    background: ${colors[Math.floor(Math.random()*colors.length)]};
                    border-radius: 50%;
                    pointer-events: none;
                    left: ${cursorX}px;
                    top: ${cursorY}px;
                    transition: 0.3s;
                    opacity: 0.7;
                `;
                
                document.body.appendChild(particle);
                
                setTimeout(() => {
                    particle.style.transform = 'scale(2)';
                    particle.style.opacity = '0';
                    setTimeout(() => particle.remove(), 300);
                }, 50);
            });
        });

        // 点击小羊音效
        function playSound() {
            const audio = new Audio('https://www.soundjay.com/button/sounds/button-35.mp3');
            audio.play();
        }
    </script>
</body>
</html>